<template>
    <div class="inline-flex items-center gap-col-2">
        <slot name="prefix"></slot>
        <!--刷新-->
        <div @click="refresh" class="inline-flex items-center justify-center box-border pa-1 cursor-pointer rounded box-border hover:bg-[#e5e7eb]">
            <svg class="w-20px h-20px" width="32" height="32" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M36.7279 36.7279C33.4706 39.9853 28.9706 42 24 42C14.0589 42 6 33.9411 6 24C6 14.0589 14.0589 6 24 6C28.9706 6 33.4706 8.01472 36.7279 11.2721C38.3859 12.9301 42 17 42 17" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
                <path d="M42 8V17H33" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
        </div>
        <!--列设置-->
        <table-column-setting v-if="list.length != 0" v-model:list="list" />
        <slot name="suffix"></slot>
    </div>
</template>

<style scoped>

</style>
<script setup lang="ts">
import {TableColumnSelect} from '@/hook/use-table'
import TableColumnSetting from './table-column-setting.vue'

const list = defineModel<TableColumnSelect[]>('list', {
    default: () => []
})

defineOptions({
    name: 'TableOperator'
})

const emit = defineEmits<{
    (e: 'refresh'): void;
}>()

function refresh() {
    emit('refresh')
}
</script>
